<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/d3.v7.min.js"></script>
</head>
<body>
<script>
    const matrix = [
        // to black, blond, brown, red
        [11975, 5871, 8916, 2868], // from black
        [1951, 10048, 2060, 6171], // from blond
        [8010, 16145, 8090, 8045], // from brown
        [1013, 990, 940, 6907]  // from red
    ];

    const width = 640;
    const height = 400;
    // Create the SVG container.
    const svg = d3.create("svg")(matrix)
        .attr("viewBox", [-width / 2, -height / 2, width, height]);

</script>
</body>
</html>